<template>
	<div class="detail-top-box">
		<div class="left-box">
			<div class="active">患者信息</div>
			<div>结果回传</div>
		</div>
		<div class="right-box">返回列表</div>
	</div>
	<div class="info-detail">
		<div class="top-title">患者信息</div>
		<el-form :model="infoform" :inline="true">
			<el-form-item label="就诊姓名" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="就诊性别" :label-width="formLabelWidth">
				<el-radio-group v-model="infoform.resource" style="width: 166px;">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机号码" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="所属民族" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="登记日期" :label-width="formLabelWidth">
				<el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期"
					:picker-options="pickerOptions" style="width: 166px;">
				</el-date-picker>
			</el-form-item>

			<el-form-item label="身份证号" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="就诊年龄" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="就诊次数" :label-width="formLabelWidth">
				<el-input v-model="infoform.username" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
	</div>
	<div class="other-box">
		<div class="other-box-left">
			<div class="top-title">其他信息</div>
			<el-form :model="infoform" :inline="true">
				<el-form-item label="联系地址" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off" style="width: 450px;"></el-input>
				</el-form-item>

				<el-form-item label="家人电话" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="历史项目" :label-width="formLabelWidth">
					<el-input v-model="infoform.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="现病史历" :label-width="formLabelWidth">
					<el-input type="textarea"  :rows="3" v-model="infoform.username" autocomplete="off" style="width: 450px;"></el-input>
				</el-form-item>
				<el-form-item label="是否面诊" :label-width="formLabelWidth">
					<div>是</div>
				</el-form-item>


			</el-form>
		</div>
		<div class="other-box-right">
			<div class="top-title">其他信息</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from "vue";

	const infoform = ref({
		username: "",
		username1: "",
		region: "",
	})
	const state = reactive({
		selectIndex: 0,
		formLabelWidth: '80px',
		value2: ''
	})

	const {
		selectIndex,
		formLabelWidth,
		value2
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.detail-top-box {
		width: 100%;
		height: 79px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 0 20px;
		box-sizing: border-box;

		.left-box {
			display: flex;
			justify-content: flex-start;

			div {
				margin-left: 10px;
				width: 100px;
				height: 40px;
				line-height: 40px;
				color: rgb(123, 123, 123);
				cursor: pointer;
			}
		}

		.right-box,
		.left-box .active {
			width: 100px;
			height: 40px;
			line-height: 40px;
			border-radius: 5px;
			// background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(142,76,183,1) 85.87%);
			color: rgb(59, 182, 254);
			font-size: 14px;
			text-align: center;
			font-family: Roboto;
			border: 1px solid rgba(59, 182, 254, 1);
			cursor: pointer;
		}
	}

	.info-detail {
		background-color: #fff;
		margin: 20px 0;
	}

	.other-box {
		display: flex;
		justify-content: flex-start;
		margin: 20px 0;

		.other-box-left {
			width: 574px;
			height: 300px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 1);
			margin-right: 10px;
		}

		.other-box-right {
			// width: 49%;
			flex: 1;
			height: 300px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 1);
		}
	}

	.top-title {
		color: rgb(16, 16, 16);
		font-size: 16px;
		font-weight: 600;
		padding-left: 10px;
		position: relative;
		// border-bottom:1px solid rgba(234,234,234,1);
		height: 50px;
		line-height: 50px;
		margin: 0 10px;

	}

	.top-title::after {
		content: "";
		display: block;
		height: 28px;
		width: 4px;
		border-radius: 10px;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
		position: absolute;
		left: 0;
		top: 12px;
		border-radius: 0px 10px 10px 0px;
	}
</style>